<template>
  <div id="baidu" class="container">
    <div class="content data">
      <div class="left">
        <h6>数据</h6>
        <div class="dataBox box">
          <div class="card days">
            <div class="cardTitle">
              <span>运行天数</span>
              <i />
            </div>
            <p>{{ controlData.total_day }}</p>
          </div>
          <div class="card webs">
            <div class="cardTitle">
              <span>总站点数</span>
              <i />
            </div>
            <p>{{ controlData.site_count }}</p>
          </div>
          <div class="card visitors">
            <div class="cardTitle">
              <span>总访客数</span>
              <i />
            </div>
            <p>{{ controlData.visit_count }}</p>
          </div>
          <div class="card articles">
            <div class="cardTitle">
              <span>文章数</span>
              <i />
            </div>
            <p>{{ controlData.article_count }}</p>
          </div>
          <div class="card keywords">
            <div class="cardTitle">
              <span>关键词数</span>
              <i />
            </div>
            <p>{{ controlData.keyword_count }}</p>
          </div>
          <div class="card inquirys">
            <div class="cardTitle">
              <span>总询盘数</span>
              <i />
            </div>
            <p>{{ controlData.inquiry_count }}</p>
          </div>
          <div class="card links">
            <div class="cardTitle">
              <span>导入链接数</span>
              <i />
            </div>
            <p>{{ controlData.in_link_count }}</p>
          </div>
          <div class="card products">
            <div class="cardTitle">
              <span>导出链接数</span>
              <i />
            </div>
            <p>{{ controlData.out_link_count }}</p>
          </div>
        </div>
      </div>
      <div class="right">
        <h6>版本信息</h6>
        <div class="version box">
          <ul>
            <li>
              <label>授权编号</label>
              <span v-if="controlData.auth_info == null">暂未授权</span>
              <span v-else>{{ controlData.auth_info.auth_num }}</span>
            </li>
            <li>
              <label>被授权人</label>
              <span v-if="controlData.auth_info == null">无</span>
              <span v-else>{{ controlData.auth_info.company }}</span>
            </li>
            <li>
              <label>当前版本</label>
              <span>{{ controlData.version }}</span>
            </li>
            <li>
              <label>系统官网</label>
              <span>
                <a href="http://www.huocms.com" target="_blank">
                  www.huocms.com
                </a>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div id="sem" class="content">
      <div class="left">
        <h6>询盘</h6>
        <ul v-if="inquiryList.length > 0" class="inquiry">
          <li v-for="item in inquiryList" :key="item.id">
            <el-link :underline="false" target="_blank" @click="goInquiry">
              {{ item.content }}
            </el-link>
            <span>{{ item.create_time }}</span>
          </li>
        </ul>
        <el-empty v-else description="暂无询盘数据" />
      </div>

      <div class="right">
        <h6>
          待办
          <span>
            <el-button type="text">更多</el-button>
          </span>
        </h6>
        <div class="need-to">
          <el-table>
            <el-table-column label="文章标题" />
            <el-table-column label="状态" />
            <el-table-column label="时间" />
            <el-table-column label="操作">
              <template>
                <el-button>查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <div class="content trend">
      <div class="left">
        <h6>
          趋势图
          <span>
            <el-select v-model="tabPosition" size="small" @change="changeTime">
              <el-option label="今天" value="1" />
              <el-option label="昨天" value="2" />
              <el-option label="最近7天" value="3" />
              <el-option label="最近30天" value="4" />
            </el-select>
            <el-select
              v-model="searchForm.site_id"
              size="small"
              placeholder="请选择"
              style="margin-left: 20px"
              @change="handleChange"
            >
              <el-option
                v-for="item in options"
                :key="item.site_id"
                :label="item.domain"
                :value="item.site_id"
              />
            </el-select>
          </span>
        </h6>
        <div class="bar box" style="margin-top: 1px">
          <Trend v-if="siteId" :type="type" :site-id="siteId" />
          <el-empty v-else description="暂无数据" />
        </div>
      </div>
      <div class="right">
        <h6>地域分布</h6>
        <div ref="echart" class="bar">
          <Bar :site-id="siteId" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import semApi from '@/api/baidu'
import Bar from './components/barChart'
import Trend from './components/trendChart.vue'
import websiteApi from '@/api/website'
import inquiryApi from '@/api/inquiry'
import logApi from '@/api/log'
import controlApi from '@/api/control'
export default {
  components: { Bar, Trend },
  data() {
    return {
      searchForm: {
        domain: '',
        site_id: ''
      },
      siteId: '',
      tabPosition: '1',
      show: false,
      lineData: [], // 今日流量
      keywordsData: [], // Top10关键词
      visitPage: [], // 受访页面
      landingPage: [], // 入口页面
      sourceSite: [], // 来源网站页面
      newVisitor: [], // 新用户
      oldVisitor: [], // 老用户
      type: 1, // 时间段的类型
      options: [],
      inquiryList: [], // 询盘数据
      website_id: '',
      controlData: [], // 控制面板数据
      website: []
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val) {
      this.website_id = val
      this.getInquiry()
      this.getWebsite()
    }
  },
  created() {
    this.website_id = this.$store.getters.siteId
    if (this.website_id) {
      this.getInquiry()
    }
    this.getWebList()

    if (this.website_id || this.website_id == '') {
      this.getWebsite()
    }
  },
  methods: {
    getWebsite() {
      websiteApi.websiteList().then(res => {
        this.website = res.data
        var a = ''
        this.website.forEach(el => {
          if (el.id == this.website_id) {
            a = el.domain
          } else if (el.children.length > 0) {
            el.children.forEach(item => {
              if (item.id == this.website_id) {
                a = item.domain
              }
            })
          }
        })
        this.getControl(a)
      })
    },
    getControl(a) {
      controlApi.dashboard({ domain: a }).then(res => {
        this.controlData = res.data
      })
    },
    // 跳转到询盘列表
    goInquiry() {
      this.$router.push({ name: 'Inquiry' })
    },
    // // 获取站点列表
    getWebList() {
      semApi.webList().then(res => {
        if (res.code == 0) {
          this.options = res.data
          this.searchForm.site_id = res.data[0].site_id
          this.siteId = res.data[0].site_id
          // this.handleChange()
          this.$nextTick(() => {
            this.getQxt()
          })
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // // 切换站点 更新echarts
    handleChange(val) {
      this.searchForm.site_id = val
      this.siteId = val
      this.$nextTick(() => {
        this.getQxt()
      })
    },
    // 切换时间段
    changeTime(val) {
      this.type = val
      this.getQxt()
    },
    // 趋势图
    getQxt() {
      const val = {
        type: this.type,
        site_id: this.siteId,
        metrics: 'pv_count'
      }
      semApi.qxtList(val).then(res => {})
    },
    // 询盘列表
    getInquiry() {
      inquiryApi.inquiryList({ website_id: this.website_id }).then(res => {
        if (res.code == 0) {
          if (res.data.length > 5) {
            this.inquiryList = res.data.splice(0, 5)
            this.inquiryList.reverse()
          } else {
            this.inquiryList = res.data
            this.inquiryList.reverse()
          }
        }
      })
    },
    goOpt() {
      this.$router.push({ name: 'OperationLog' })
    }
  }
}
</script>

<style lang="scss">
#baidu.container {
  padding: 16px 20px;
  .el-link.el-link--default:hover {
    color: #f84311;
  }
}
#baidu {
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: #f84311;
    box-shadow: none;
    color: #fff;
  }

  .el-radio-button__inner:hover {
    color: #f84311;
  }
  .el-menu--horizontal > .el-menu-item.is-active {
    background-color: #f84311 !important;
    color: #fff !important;
  }
  .elmenu .el-submenu.is-active .el-submenu__title {
    background-color: #f84311 !important;
    color: #fff !important;
    .el-submenu__icon-arrow.el-icon-arrow-down {
      color: #fff !important;
    }
  }
}

#radioGroup {
  .el-radio-button__inner {
    border: none;
    border-right: solid 1px #eee;
  }
  .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0;
  }
  .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 0;
  }
}
#sem {
  .el-table {
    color: #323437;
  }
  .el-table td,
  .el-table th.is-leaf {
    border: none;
  }
  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #fff;
  }
  .el-table--enable-row-hover .el-table__body tr > td {
    height: 31px;
  }
  .el-table--mini td {
    padding: 0;
  }
  .el-table::before {
    height: 0;
  }
  .el-table__header thead th {
    color: #787a7d;
  }
  .el-progress-bar__inner,
  .el-progress-bar__outer {
    border-radius: 0;
    background-color: #fff;
  }
  .el-progress-bar__innerText {
    color: #323437;
  }
}
</style>
<style scoped lang="scss">
ul,
li {
  list-style: none;
}
.content.data {
  height: 315px;
  .left {
    padding-right: 0;
  }
  .right {
    .version {
      ul {
        border: solid 1px #edeef3;
        border-bottom: none;
      }
      li {
        border-bottom: solid 1px #edeef3;
        width: 100%;
        label,
        span {
          display: inline-block;
          height: 53px;
          line-height: 53px;
          font-size: 14px;
          color: #000;
          font-family: 'MicrosoftYaHeiLight';
        }
        label {
          width: 36%;
          text-align: center;
          border-right: solid 1px #edeef3;
          background-color: rgba($color: #f5f6fa, $alpha: 0.5);
          font-weight: normal;
        }
        span {
          text-indent: 2em;
          width: calc(61%);
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .box {
    padding-left: 20px;
  }
}
.dataBox {
  width: 100%;
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  .card {
    width: calc(25% - 21px);
    height: 96px;
    margin-right: 21px;
    margin-bottom: 21px;
    border-radius: 2px;
    padding-left: 15px;

    .cardTitle {
      margin-top: 20px;
      margin-bottom: 16px;
      span {
        display: inline-block;
        height: 25px;
        line-height: 25px;
        border-radius: 25px;
        width: 80px;
        font-size: 13px;
        color: #fff;
        text-align: center;
      }
      i {
        width: calc(100% - 80px);
        display: inline-block;
        vertical-align: middle;
      }
    }
    p {
      font-size: 30px;
      line-height: 21px;
      font-family: 'AKROBAT-SEMIBOLD';
      font-weight: inherit;
    }
  }
  .card.days {
    border-left: solid 5px #f84023;
    background-color: #ffeff0;
    span {
      background-color: #f85035;
    }
    i {
      border-top: solid 1px rgba($color: #f84311, $alpha: 0.1);
    }
    p {
      color: #f84311;
    }
  }
  .card.webs {
    border-left: solid 5px #f39d0a;
    background-color: #fef7e7;
    span {
      background-color: #fcb100;
    }
    i {
      border-top: solid 1px rgba($color: #f39d0a, $alpha: 0.1);
    }
    p {
      color: #f39d0a;
    }
  }
  .card.visitors {
    border-left: solid 5px #0fb87f;
    background-color: #e9f8f3;
    span {
      background-color: #41bc4a;
    }
    i {
      border-top: solid 1px rgba($color: #0fb87f, $alpha: 0.1);
    }
    p {
      color: #0fb87f;
    }
  }
  .card.articles {
    border-left: solid 5px #89bf16;
    background-color: #f1f9df;
    span {
      background-color: #89bf16;
    }
    i {
      border-top: solid 1px rgba($color: #95cd1b, $alpha: 0.1);
    }
    p {
      color: #89bf16;
    }
  }
  .card.keywords {
    border-left: solid 5px #b03dfd;
    background-color: #f4f0ff;
    span {
      background-color: #8a5df8;
    }
    i {
      border-top: solid 1px rgba($color: #b03dfd, $alpha: 0.1);
    }
    p {
      color: #b03dfd;
    }
  }
  .card.inquirys {
    border-left: solid 5px #566aff;
    background-color: #e7f6fd;
    span {
      background-color: #6677f9;
    }
    i {
      border-top: solid 1px rgba($color: #566aff, $alpha: 0.1);
    }
    p {
      color: #15b3f1;
    }
  }
  .card.links {
    border-left: solid 5px #15b3f1;
    background-color: #e9f8ff;
    span {
      background-color: #21c0ff;
    }
    i {
      border-top: solid 1px rgba($color: #15b3f1, $alpha: 0.1);
    }
    p {
      color: #15b3f1;
    }
  }
  .card.products {
    border-left: solid 5px #37ccba;
    background-color: #cbf7f2;
    span {
      background-color: #37ccba;
    }
    i {
      border-top: solid 1px rgba($color: #15b3f1, $alpha: 0.1);
    }
    p {
      color: #37ccba;
    }
  }
}
.content.trend {
  height: 500px;
}
.content.inquiryAndopt {
  margin-bottom: 60px;
}
.inquiry {
  margin-left: 40px;
  margin-top: 10px;
  li {
    height: 54px;
    line-height: 54px;
    border-bottom: solid 1px #edeef3;
    color: #666;
    display: flex;
    justify-content: space-between;
    width: 100%;
    .el-link {
      line-height: 54px;
      font-size: 14px;
      display: inline-block;
      width: calc(100% - 200px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    span {
      color: #666;
      font-size: 13px;
    }
  }
}
h6 {
  font-size: 15px;
  color: #000;
  font-weight: normal;
  font-family: 'MicrosoftYaHeiLight';
  padding-left: 20px;
  padding-bottom: 20px;
  border-bottom: solid 1px #edeef3;
  position: relative;
  span {
    position: absolute;
    right: 0;
    top: -6px;
  }
}

.content {
  margin-top: 20px;
  margin-bottom: 20px;
  height: 380px;
  h6 {
    margin-bottom: 20px;
  }
  .left {
    width: calc(66% - 20px);
    float: left;
    background-color: #fff;
    padding: 20px 20px 20px 0;
    border: solid 1px #eee;
    border-radius: 5px;
    height: 100%;
    margin-right: 20px;
    @media (max-width: 1200px) {
      width: 100%;
      margin-bottom: 20px;
    }
  }
  .right {
    width: calc(34% - 0px);
    float: left;
    background-color: #fff;
    padding: 20px 20px 20px 0;
    border: solid 1px #eee;
    border-radius: 5px;
    height: 100%;
    @media (max-width: 1200px) {
      width: 100%;
      margin-bottom: 20px;
    }
  }
  .need-to {
    padding-left: 20px;
  }

  .right {
    .visitor {
      display: flex;
      justify-content: space-between;
      flex-basis: auto;
      margin-top: 50px;
      ul {
        list-style-type: none;
        flex-grow: 1;

        li {
          border-bottom: solid 1px #eee;
          border-right: solid 1px #eee;
          padding-left: 20px;
          height: 40px;
          line-height: 40px;
          font-size: 12px;
          color: #414448;
        }
      }

      ul.first-column li {
        border-left: solid 1px #eee;
        text-align: center;
        padding-left: 0;
        color: #787a7d;
      }
      ul.second-column li:first-child {
        border-left: solid 1px #eee;
        border-right: solid 1px #eee;
        line-height: 30px;
        div {
          color: #48cb6d;
          font-size: 30px;
          span {
            font-size: 18px;
          }
        }
      }
      ul.last-column li:first-child {
        line-height: 30px;
        div {
          color: #51a8f9;
          font-size: 30px;
          span {
            font-size: 18px;
          }
        }
      }
      ul.first-column li:first-child {
        border-left: none;
      }
      li.second-row {
        border-top: solid 1px #eee;
      }
      // ul.last-column li:first-child{
      //   border-right: none;
      // }
      ul li:first-child {
        height: 71px;
        border: none;
        margin-bottom: 33px;
        font-size: 16px;
        color: #5d5d61;
      }
    }
  }
}
.bar {
  width: 100%;
  margin-top: -20px;
}
</style>
